<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        h1{
            color: rgb(126, 83, 150);
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <h1>{{name}}</h1>
        <h1>{{msg}}</h1>
        <h1>{{flag?answerYes:answerNo}}</h1> -->
        <!-- <span>{{name}}</span>
        <i>{{msg}}</i>
        <em>{{flag?answerYes:answerNo}}</em> -->
        <!-- <em v-text="msg1"></em> -->
        <!-- <h1 v-html="msg2"></h1> -->
        <!-- <h1 v-text="msg2"></h1> -->
        <!-- <u v-text="msg1"></u> -->
        <!-- <span v-once="msg1">{{msg1}}</span> -->
        <!-- <a v-bind:href="url">百度一下下</a> -->
        <!-- <i v-bind:title="title">有彩虹</i> -->
        <!-- <h1 :title="title">致彩虹</h1> -->
        <!-- <h1 v-if="flag">{{answerYes}}</h1> -->
        <!-- <h1 v-else>{{answerNo}}</h1> -->
        <!-- <h2 v-if="num >= 5">{{answerYes}}</h2> -->
        <!-- <h2 v-else-if="num <= 5 && num >= 0">{{answerMid}}</h2> -->
        <!-- <h2 v-else>{{answerNo}}</h2> -->
        <!-- <h2 v-show="num > 100">{{answerNo}}</h2> -->
        <!-- <i v-for='(item,index) in list' :key="index">{{item.name}}----{{item.age}}--</i> -->
        <!-- <ul> -->
            <!-- <li v-for="(item,index) of list" :key="index">{{item.name}}---{{item.age}}</li> -->
        <!-- </ul> -->
        <!-- <span v-text="name"></span>
        <span v-once="name">{{name}}</span>
        <h1 v-html="msg"></h1><!--将msg的内容以html代码的格式解析-->
        <!-- <h1 v-text="msg"></h1>将msg的内容以文本的格式解析 -->
        <!-- <h1 v-once="msg">{{msg}}</h1>和v-text一样只是是一次性的 不能更改值 -->
        <!-- <h1 v-bind:title="title">彩虹再次升起</h1>给title属性添加属性值 -->
        <!-- <h1 :title="title">在那永无至今的路上</h1>给title属性添加属性值 简写版 -->
        <!-- <big v-if="flag">{{answerYes}}</big>根据条件执行指定if语句 -->
        <!-- <small v-else>{{answerNo}}</small>else语句 -->
        <!-- <h1 v-if="num > 3">{{answerY}}</h1>根据条件执行指定语句 如果num大于3执行answerY语句 -->
        <!-- <h1 v-else-if="num < 3 && num != 0">{{answerM}}</h1>如果num 小于 3 并且不等于0 执行answerM语句 -->
        <!-- <h1 v-else>{{answerN}}</h1>否则执行answerN语句 -->
        <!-- <h2 v-show="!flag">{{answerY}}</h2>如果flag不是true执行answerY语句 是true的话会给h2标签添加一个‘display=none’的属性 -->
        <!-- <ul> -->
            <!-- <li v-for="(item,index) in list" :key="index">{{item.msg}}--{{item.id}}</li> -->
            <!-- <li v-for="(item,index) of list" :key="index">{{item.msg}}---{{item.id}}</li> -->
        <!-- </ul> -->
        <h1>{{msg}}</h1>
        <h1 v-text="msg"></h1>
        <h1 v-html="msgg"></h1>
        <h1 v-once="msg">{{msg}}</h1>
        <h1 v-show="flag">{{answerY}}</h1>
        <h1 v-if="num <3">{{answerY}}</h1>
        <h1 v-else-if="num > 10 && num < 20">{{answerM}}</h1>
        <h1 v-else>{{answerN}}</h1>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item.name}}---{{item.age}}</li>
        </ul>
        <em v-bind:title="title">冷漠堆积的辩解</em>
    </div>
    <script>
        // let vm = new Vue({
        //     el:'.box',
        //     data:{
        //         name:'iu',
        //         msg:'你喜欢丁香花还是百合花',
        //         flag:false,
        //         answerYes:'丁香花',
        //         answerNo:'百合花'
        //     }
        // })
        // console.log(vm);
        // let vu = new Vue({
        //     el:'.box',
        //     data:{
        //         name:'io',
        //         msg:'你喜欢丁香花还是百合花？',
        //         flag:true,
        //         answerYes:'丁香花',
        //         answerNo:'百合花'
        //     }
        // })
        // let data = {
        //     msg1:'你喜欢丁香花还是百合花？',
        //     url:'http://baidu.com',
        //     title:'又是一天 努力地安慰自己',
        //     flag:true,
        //     num:4,
        //     answerYes:'在那永无止尽的长路上',
        //     answerMid:'像是渐渐消失一般难熬的一天',
        //     answerNo:'我今天也在追逐那彩虹',
        //     list:[{name:'iu',age:18},{name:'lili',age:16},{name:'jack',age:4},{name:'mike',age:17}]
        // }
        // // Object.freeze(data);
        // let vu = new Vue({
        //     el:'.box',
        //     data
        // })
        // vu.msg1 = '丁香花';
        // let data = {
        //     name:'iu',
        //     msg:'<i>用睁不开的眼 迎接这清晨</i>',
        //     title:'是否能够靠近仿若消失的梦',
        //     flag:false,
        //     answerYes:'已经逃脱的昨日再次袭来',
        //     answerNo:'所有人向着同一个不变的方向前行',
        //     num:0,
        //     answerY:'我今天也在追逐那彩虹',
        //     answerM:'又是一天 努力地安慰自己',
        //     answerN:'为疲惫的我祈祷',
        //     list:[{msg:'所有人向着同一个不变的方向前行',id:'01'},{msg:'熟悉的放下的新人',id:'02'},{msg:'那被染红的晚霞在何方',id:'03'},{msg:'是否能够靠近那仿若已经消失的梦',id:'04'},{msg:'好不容易又走过一格 我的人生才落寞',id:'05'}]
        // }
        // // Object.freeze(data);
        // let vu = new Vue({
        //     el:'.box',
        //     data
        // })
        // // vu.name = 'lili';
        // // vu.msg = '彩虹再次升起';
        let vu = new Vue({
            el:'.box',
            data:{
                msg:'所有人向着同一个不变的方向前行',
                msgg:'<i>艰辛的一天 在那尽头滚落的泪</i>',
                flag:true,
                num:16,
                answerY:'这长久以来的悲伤会结束吗',
                answerM:'睁开眼后 醒悟了这个事实',
                answerN:'变成梦想中的自己 星辰永远耀眼',
                list:[{name:'jack',age:18},{name:'iu',age:17},{name:'lili',age:13},{name:'tom',age:20}],
                title:'又是一天 努力地安慰自己'
            }
        })
        // vu.msg = '不要厌烦 稍作休憩';

    </script>
</body>
</html>